<template>
  <view class="backdrop">
    <view class="tesecanwu">
      <image class="fanhui" :src="imageUrl + '/tesewuchan/tesewuchanfanhui2.png'" mode="" @click="handleClicks">
      </image>
      <text class="biaoti">游览古村镇</text>
    </view>
    <view class="navigationBar">
      <!-- <p class="headline"></p> -->
      <br>
      <view style="height: 35px;">
      </view>
      <view class="lbt1">
        <p class="geographical jianju">每周精彩</p><br />
        <p class="specialty">古韵周周焕</p>
        <view class="lbt2" style="margin-top: 40rpx;">
          <z-swiper class="lbt1" :indicator-dots="indicatorDots" v-model="list" :custom-style="{width: '112%',height:'120%'}"
            :options="{slidesPerView : 1.25,spaceBetween : -90, loop : true,  autoplay:false,}">
            <z-swiper-item v-for="(item,index) in list" :key="index">
              <image class="lbt" :src="item" mode="aspectFill">
              </image>
            </z-swiper-item>
          </z-swiper>
        </view>
      </view>
      <view class="ancientTown" style="margin-top:60px;">
        <p class="geographical">时空视角中的古镇</p><br />
        <p class="specialty">古村镇地理分部一览</p>
        <image class="ditu" :src="imageUrl + '/images2/ditu.png'" @click="ditu">
          <p class="ditu-p">您周边的古镇村：</p>
        </image>
        <br>
        <br><br>
        <view class="BerryTeaButton">
          <p class="wenzi1">鱼都·<span class="p-span">桥口古镇</span></p>
        </view>
        <view class="blackGoat">
          <p class="wenzi2">戏乡·<span class="p-span">新康古镇</span></p>
        </view>
        <view class="ViewAll2">查看全部 ></view>
      </view>
      <view class="heti">
        <view class="">
          <p class="geographical">文化视角中的古镇</p><br />
          <p class="specialty">解读具有典型文化基因的古村镇链</p>
        </view>
        <view class="displayArea">
          <image class="berryTea" :src="imageUrl + '/images2/tanxungengdu.png'" mode="" @click="handleClick">
          </image>
        </view>
        <view class="smallDisplayArea">
          <image class="centenaryTea" :src="imageUrl + '/images2/dilifenbu.png'" mode=""></image>
          <image class="tributeGreenTea" :src="imageUrl + '/images2/sangjiayunji.png'" mode=""></image>
        </view>
        <view class="ancientTown" style="margin-top:60px;">
          <p class="story">景观意向视角</p>
          <p class="small" style="margin-right: 4px;">景致异彩呈</p>
          <view class="displayArea">
            <image class="berryTea gaosan" :src="imageUrl + '/images2/gaoshan.png'" mode="" @click="handleClick">
            </image>
          </view>
          <view class="smallDisplayArea">
            <image class="shanshen gaosan" :src="imageUrl + '/images2/shanshen.png'" mode=""></image>
            <image class="diaojiao gaosan" :src="imageUrl + '/images2/diaojiaolou.png'" mode=""></image>
            <image class="diaojiao2 gaosan" :src="imageUrl + '/images2/pangshuigucunzhen.png'" mode="">
            </image>
            <view class="BerryTeaButton2">
              <p class="wenzi1"><span class="p-span">林海雪原</span></p>
            </view>
            <view class="blackGoat2">
              <p class="wenzi2"><span class="p-span">岭南风情</span></p>
            </view>
            <view class="ViewAll2">查看全部 ></view>
          </view>
          <view class="ancientTown2" style="margin-top:-10px;">
            <p class="story">人物典故视角</p>
            <p class="small">追寻名人足迹 探访故事里的古村镇</p>
            <image class="dufutu" :src="imageUrl + '/images2/dupu.png'" mode=""></image>
            <image :src="imageUrl + '/tesewuchan/tesewuchanfengjing.png'" class="headerLabel"></image>
            <p class="Travel">《徐霞客游记》里的地理物产</p>
            <p class="life">毛泽东生活里的古村镇物产</p>
            <view class="ViewAll4">查看全部 ></view>
          </view>
        </view>
      </view>
      <view class="ancientTown3">
        <p class="geographical">时代新新风貌</p><br />
        <p class="specialty">乡村振兴 古村镇展新颜</p>
        <view class="uni-margin-wrap" style="margin-top: 40rpx;">


          <z-swiper class="swiper" circular :indicator-dots="indicatorDots" v-model="list2" :custom-style="{width: '75%'}"
            :options="{slidesPerView : 1.1,spaceBetween : 10, loop : true,  autoplay:false,}">
            <z-swiper-item v-for="(item,index) in list2" :key="index">
              <image class="swiper-item2 " :src="item" mode="aspectFill">
              </image>
              <p class="lunbotuziti">回乡创业建家园,新场村新活力</p>
              <p style="color: #a7acaa; font-size: 15px;">
                永顺县新场村有志青年胡高江等回乡发展传统产业，通过电商赋能莓茶传统工艺、天然楠木林基地、黑山羊生态养殖。</p>
            </z-swiper-item>
          </z-swiper>
        </view>
      </view>
      <view class="ancientTown" style="margin-top: -30px;">
        <p class="geographical">岁时风月记</p><br />
        <p class="specialty">从古村镇岁时节律到当代人的生活风向标</p>
        <view class="uni-margin-wrap" style="margin-top: 40rpx;">

	<view class="backdrop">

		<view class="tesecanwu">
			<image class="fanhui" :src="imageUrl + '/tesewuchan/tesewuchanfanhui2.png'" mode="" @click="handleClicks">
			</image>
			<text class="biaoti">游览古村镇</text>
		</view>
		<view class="navigationBar">
			<!-- <p class="headline"></p> -->
			<br>
			<view style="height: 35px;">

			</view>

			<view class=" lbt1">
				<p class="geographical jianju">每周精彩</p><br />
				<p class="specialty">古韵周周焕</p>
				<view class="lbt2" style="margin-top: 40rpx;">

					<z-swiper class="lbt1" :indicator-dots="indicatorDots" v-model="list"
						:custom-style="{width: '112%',height:'120%'}"
						:options="{slidesPerView : 1.25,spaceBetween : -85, loop : true,  autoplay:false,}">
						<z-swiper-item v-for="(item,index) in list" :key="index">
							<image class=" lbt" :src="item" mode="aspectFill">
							</image>
						</z-swiper-item>
					</z-swiper>
				</view>
			</view>



			<view class="ancientTown" style="margin-top:60px;">
				<p class="geographical">时空视角中的古镇</p><br />
				<p class="specialty">古村镇地理分部一览</p>
				<image class="ditu" :src="imageUrl + '/images2/ditu.png'" @click="ditu">
					<p class="ditu-p">您周边的古镇村：</p>
				</image>
				<br>
				<br><br>
				<view class="BerryTeaButton">
					<p class="wenzi1">鱼都·<span class="p-span">桥口古镇</span></p>
				</view>
				<view class="blackGoat">
					<p class="wenzi2">戏乡·<span class="p-span">新康古镇</span></p>
				</view>
				<view class="ViewAll2">查看全部 ></view>
			</view>


			<view class="heti">

				<view class="">
					<p class="geographical">文化视角中的古镇</p><br />
					<p class="specialty">解读具有典型文化基因的古村镇链</p>
				</view>
				<view class="displayArea">
					<image class="berryTea" :src="imageUrl + '/images2/tanxungengdu.png'" mode="" @click="handleClick">
					</image>
				</view>
				<view class="smallDisplayArea">
					<image class="centenaryTea" :src="imageUrl + '/images2/dilifenbu.png'" mode=""></image>

					<image class="tributeGreenTea" :src="imageUrl + '/images2/sangjiayunji.png'" mode=""></image>
				</view>

				<view class="ancientTown" style="margin-top:60px;">
					<p class="story">景观意向视角</p>
					<p class="small" style="margin-right: 4px;">景致异彩呈</p>

					<view class="displayArea">
						<image class="berryTea gaosan" :src="imageUrl + '/images2/gaoshan.png'" mode=""
							@click="handleClick">
						</image>
					</view>

					<view class="smallDisplayArea">
						<image class="shanshen gaosan" :src="imageUrl + '/images2/shanshen.png'" mode=""></image>
						<image class="diaojiao gaosan" :src="imageUrl + '/images2/diaojiaolou.png'" mode=""></image>
						<image class="diaojiao2 gaosan" :src="imageUrl + '/images2/pangshuigucunzhen.png'" mode=""></image>

						<view class="BerryTeaButton2">
							<p class="wenzi1"><span class="p-span">林海雪原</span></p>
						</view>
						<view class="blackGoat2">
							<p class="wenzi2"><span class="p-span">岭南风情</span></p>
						</view>
						<view class="ViewAll2">查看全部 ></view>

					</view>

					<view class="ancientTown2" style="margin-top:-10px;">
						<p class="story">人物典故视角</p>
						<p class="small">追寻名人足迹 探访故事里的古村镇</p>
						<image class="dufutu" :src="imageUrl + '/images2/dupu.png'" mode=""></image>
						<image :src="imageUrl + '/tesewuchan/tesewuchanfengjing.png'" class="headerLabel"></image>
						<p class="Travel">《徐霞客游记》里的地理物产</p>
						<p class="life">毛泽东生活里的古村镇物产</p>
						<view class="ViewAll4">查看全部 ></view>
					</view>
				</view>

			</view>






			<view class="ancientTown3">
				<p class="geographical">时代新新风貌</p><br />
				<p class="specialty">乡村振兴 古村镇展新颜</p>
				<view class="uni-margin-wrap" style="margin-top: 40rpx;">

					<z-swiper class="swiper" circular :indicator-dots="indicatorDots" v-model="list2"
						:custom-style="{width: '75%'}"
						:options="{slidesPerView : 1.1,spaceBetween : 12, loop : true,  autoplay:false,}">
						<z-swiper-item v-for="(item,index) in list2" :key="index">
							<image class="swiper-item2 " :src="item" mode="aspectFill">
							</image>
							<p class="lunbotuziti">回乡创业建家园,新场村新活力</p>
							<p style="color: #a7acaa; font-size: 15px;">
								永顺县新场村有志青年胡高江等回乡发展传统产业，通过电商赋能莓茶传统工艺、天然楠木林基地、黑山羊生态养殖。</p>
						</z-swiper-item>
					</z-swiper>
				</view>
			</view>
		</view>

		<view class="ancientTown" style="margin-top: -30px;">
			<p class="geographical">岁时风月记</p><br />
			<p class="specialty">从古村镇岁时节律到当代人的生活风向标</p>
			<view class="uni-margin-wrap" style="margin-top: 40rpx;">

				<z-swiper class="swiper" circular :indicator-dots="indicatorDots" v-model="list3"
					:custom-style="{width: '100%'}"
					:options="{slidesPerView : 1.5,spaceBetween : -15, loop : true,  autoplay:false,}">
					<z-swiper-item v-for="(item,index) in list3" :key="index">
						<image class="swiper-item" :src="item" mode="aspectFill">
						</image>
					</z-swiper-item>
				</z-swiper>
			</view>
		</view>

	</view>

          <z-swiper class="swiper" circular :indicator-dots="indicatorDots" v-model="list3" :custom-style="{width: '100%'}"
            :options="{slidesPerView : 1.5,spaceBetween : -20, loop : true,  autoplay:false,}">
            <z-swiper-item v-for="(item,index) in list3" :key="index">
              <image class="swiper-item" :src="item" mode="aspectFill">
              </image>
            </z-swiper-item>
          </z-swiper>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
	       previousPageParam: '',
	       lastValidParam: '',
	       storedValue: '',
	       imageUrl: this.$imageUrl,
	       indicatorDots: true,

      list: [
        'https://xnlv.lizxx.com/image/xnlv/static/images2/shutangshanguzheng.png',
        'https://xnlv.lizxx.com/image/xnlv/static/images2/shutangshanguzheng.png',
        'https://xnlv.lizxx.com/image/xnlv/static/images2/shutangshanguzheng.png',
      ],
      list2: [
        'https://xnlv.lizxx.com/image/xnlv/static/images2/zhuli.png',
        'https://xnlv.lizxx.com/image/xnlv/static/images2/zhulihucunzhen2.png',
        'https://xnlv.lizxx.com/image/xnlv/static/images2/zhuli.png',
      ],
      list3: [
        // 'https://xnlv.lizxx.com/image/xnlv/static/images2/yiyue.png',
        'https://xnlv.lizxx.com/image/xnlv/static/images2/xiazhiluezhang.png',
        'https://xnlv.lizxx.com/image/xnlv/static/images2/youlan.png',
      ]
    }
  },
    onLoad(options) {
       this.previousPageParam = options.fromPage;
       console.log('上一个页面传递的参数：', this.previousPageParam);
   
       // 尝试从小程序存储中读取存储的值
       const storedValueFromStorage1 = wx.getStorageSync('myStoredValue');
       this.storedValue = storedValueFromStorage1? storedValueFromStorage1 : null;
   
       let isOverwritten = false;
       if (this.previousPageParam) {
         if (this.storedValue!== this.previousPageParam) {
           isOverwritten = true;
         }
         this.lastValidParam = this.previousPageParam;
         if (this.previousPageParam!== null && this.previousPageParam!== undefined) {
           this.storedValue = this.previousPageParam;
           console.log('存储的值为：', this.storedValue);
           console.log('上一次页面传递的参数：', this.lastValidParam);
           // 将存储的值保存到小程序存储中
           wx.setStorageSync('myStoredValue', this.previousPageParam);
         }
       } else {
         if (this.storedValue!== null && this.storedValue!== undefined) {
           this.lastValidParam = this.storedValue;
           console.log('正在使用存储的值，存储值为：', this.storedValue);
         } else {
           console.log('没有有效的存储值可用。');
         }
       }
       if (isOverwritten) {
         console.log('发生了覆盖操作。');
       } else {
         console.log('未发生覆盖操作。');
       }
       console.log('lastValidParam 的完整值为：', this.lastValidParam);
     },
     methods: {
       changeIndicatorDots(e) {
         this.indicatorDots =!this.indicatorDots;
       },
       changeAutoplay(e) {
         this.autoplay =!this.autoplay;
       },
       intervalChange(e) {
         this.interval = e.target.value;
       },
       durationChange(e) {
         this.duration = e.target.value;
       },
       handleClick() {
         wx.redirectTo({
           url: '/pages-special-local/pages-special-products/detail-page',
         });
       },
       handleClicks() {
         console.log('handleClicks 中的参数值：', this.previousPageParam);
         if (this.previousPageParam) {
           console.log('特定跳转');
           wx.redirectTo({
             url: "/" + this.previousPageParam,
           });
         } else {
           // 参数为空时使用上一次有效的参数跳转
           console.log('上一次特定跳转');
           if (this.lastValidParam) {
             console.log('lastValidParam 中的参数值：', this.lastValidParam);
             wx.redirectTo({
               url: "/" + this.lastValidParam,
             });
           }
         }
       },
       ditu() {
         wx.redirectTo({
           url: '/pages/ditu/ditu'
         });
       }
     }
   };
   </script>

<style>
	.lbt2 {
		height: 320px;
		margin-left: 24px;
		margin-top: 5px;
		/* border: 2px solid red; */
	}

	.lbt1 {
		width: 100%;
		height: 450px;
		margin-top: 30px;
		/* border: 2px solid pink;s */
	}

	.lbt {
		width: 72%;
		height: 100%;
		/* border: 2px solid blue; */
		display: block;
		/* width: 249px; */
		/* height: 356px; */
		line-height: 18vh;
		text-align: center;
		transform: scale(1);
		border-radius: 4px 4px 4px 4px;
	}

	.jianju {
		margin-top: 50vh;
	}

	.heti {
		margin-left: 4vw;
		
	}

	.lunbotuziti {
		font-size: 20px;
		margin-top: 20px;
		color: #828a6c;
	}

	.ancientTown3 {
		margin-top: 20px;
		margin-left: -45px;
	}

	.swiper-item2 {
		display: block;
		width: 295px;
		height: 152px;
		line-height: 152px;
		text-align: center;
	}

	.ancientTown2 {
		margin-top: 20px;
	}

	.dufutu {
		width: 333px;
		height: 167.17px;
		margin-left: 20px;
		margin-top: 8px;
		margin-bottom: 11px;
	}

	.BerryTeaButton2 {
		width: 89.6px;
		height: 38.08px;
		background-color: white;
		margin-left: 27px;
		display: inline-block;
		border-radius: 8px;
		margin-top: 5px;
	}

	.blackGoat2 {
		margin-top: 5px;
		width: 89.6px;
		height: 38.08px;
		background-color: white;
		margin-left: 8px;
		display: inline-block;
		border-radius: 8px;
		margin-bottom: 60px;
	}

	.diaojiao2 {
		width: 201px;
		height: 90.3px;
		display: block;
		margin-left: 157px;
		margin-top: 8px;
	}

	.diaojiao {
		width: 201px;
		height: 90.3px;
		display: block;
		margin-left: 157px;
		margin-top: -188px;
	}

	.shanshen {
		width: 120px;
		height: 189px;
		display: block;
		margin-left: 27px;
	}

	.gaosan {
		border-radius: 8px;
	}

	.p-span {
		font-size: 15px;
	}

	.biaoti {
		margin-left: 40vw;
		margin-top: 75px;
	}

	.fanhui {
		width: 19px;
		height: 19px;
		/* position: absolute; */
		left: 10px;
		position: fixed;
		top: 60px;
	}

	.tiaozhuan {
		background-color: #78837c;
		height: 2px;
		width: 30px;
		margin-left: 78px;
	}

	.z-swiper-item {
		height: 700rpx;

	}

	.z-swiper {
		width: 100%;
		height: 400rpx;
		border: 2px solid blue;

	}

	.image-zswiper {
		position: absolute;
		z-index: 3;
		margin-top: 50%;
		height: 500rpx !important;
		width: 249rpx;
		border: 2px solid red;
	}

	.windVane {
		/* height: 500px; */
		margin-top: 30px;

	}

	.January-1 {
		width: 249px;
		height: 356px;

	}

	.ViewAll4 {
		color: #78837c;
		position: relative;
		left: -67px;
		top: -27px;
		display: inline-block;
	}

	.Travel {
		color: #78837c;
		position: relative;
		left: 15px;
		top: -63px;
		display: inline-block;
	}

	.life {
		color: #78837c;
		position: relative;
		left: 123px;
		top: -55px;
		display: inline-block;
	}

	.headerLabel {
		width: 87px;
		height: 87px;
		margin-left: 20px;
		display: inline-block;

	}

	.small {
		color: #78837c;
		text-align: center;
		font-size: 12px;
		font-weight: 500;
		margin-top: 5px;
		margin-bottom: 20px;
	}

	.eternity {
		width: 340px;
		height: 153px;
		margin-left: 20px;
		margin-top: 8px;
	}

	.jiaobiao1 {
		color: #78837c;
		display: inline-block;
		font-size: 23px;
		font-weight: 500;
		position: relative;
		top: -15px;
		left: -200px;
	}

	.jiaobiao2 {
		color: #78837c;
		display: inline-block;
		font-size: 23px;
		font-weight: 500;
		position: relative;
		top: 15px;
		left: -123px;
	}

	.products {
		color: #78837c;
		display: inline-block;
		font-size: 23px;
		font-weight: 500;
		margin-left: 20px;
	}

	.story {
		color: #78837c;
		display: inline-block;
		font-size: 23px;
		font-weight: 500;
		margin-left: 120px;
	}

	.ClickAtTheBottom {
		margin-top: 10px;
	}

	.ViewAll3 {
		position: absolute;
		color: #78837c;
		font-size: 12px;
		display: inline-block;
		margin-left: 30px;
		margin-top: 8px;
	}

	.YongshunBlackGoat {
		width: 103px;
		height: 31px;
		display: inline-block;
		margin-left: 8px;
	}

	.YongshunMayicha {
		width: 103px;
		height: 31px;
		display: inline-block;
		margin-left: 34px;
	}

	.uni-margin-wrap {
		width: 690rpx;
		width: 100%;
		margin-left: 24px;
		margin-top: 5px;
	}

	.swiper {
		height: 356px;
	}

	.swiper-item {
		display: block;
		width: 249px;
		height: 356px;
		line-height: 356px;
		text-align: center;
	}

	.swiper-list {
		margin-top: 40rpx;
		margin-bottom: 0;
	}

	.uni-common-mt {
		margin-top: 60rpx;
		position: relative;
	}

	.info {
		position: absolute;
		right: 20rpx;
	}

	.uni-padding-wrap {
		width: 550rpx;
		padding: 0 100rpx;
	}


	.prev {
		left: 10px;
	}

	.next {
		right: 10px;
	}

	.ViewAll2 {
		color: #78837c;
		text-align: center;
		font-size: 12px;
		display: inline-block;
		margin-left: 23px;
	}

	.wenzi1 {
		display: inline-block;
		margin-top: 8px;
		margin-left: 15px;
		color: #99a19b;
	}

	.wenzi2 {
		display: inline-block;
		margin-top: 8px;
		margin-left: 15px;
		color: #99a19b;
	}

	.BerryTeaButton {
		width: 128.39px;
		height: 38.08px;
		background-color: white;
		margin-left: 27px;
		display: inline-block;
		border-radius: 8px;
		margin-top: 5px;
	}

	.blackGoat {
		margin-top: 5px;
		width: 128.39px;
		height: 38.08px;
		background-color: white;
		margin-left: 8px;
		display: inline-block;
		border-radius: 8px;
		margin-bottom: 60px;
	}

	.ditu {
		width: 381.54px;
		height: 196.94px;
		margin-left: 5vw;
		margin-top: 15px;
		/* border: 2px solid black; */

	}

	.ditu-p {
		width: ;
		height: ;
		margin-left: 15vw;
		margin-top: -40px;
		/* border: 2px solid black; */
	}

	.ancientTown {
		margin-top: 30px;
	}

	.geographical {
		color: #78837c;
		text-align: center;
		font-size: 23px;
		font-weight: 500;
		margin-top: 5px;
		/* border: 2px solid black; */
	}

	.specialty {
		color: #78837c;
		text-align: center;
		font-size: 12px;
		font-weight: 500;
		margin-top: 5px;
	}

	.ViewAll {
		color: #78837c;
		text-align: center;
		font-size: 12px;
	}

	.displayArea {
		margin-top: 25px;
		width: 100vw;
		margin-left: -7px;
	}

	.smallDisplayArea {
		margin-top: 7px;
		margin-left: -7px;
	}

	.berryTea {
		width: 333px;
		height: 167px;
		display: block;
		margin-left: 27px;
	}

	.centenaryTea {
		width: 200px;
		height: 121px;
		display: inline-block;
		margin-left: 27px;
	}

	.tributeGreenTea {
		width: 121px;
		height: 121px;
		display: inline-block;
		margin-left: 13px;
	}



	.backdrop {

		background-color: #e4ebe9;
		height: 100vh;
		width: 100vw;
		position: fixed;


		overflow: auto;
		overflow-x: hidden;
	}

	.teaDrinks {
		height: 18px;
		width: 36px;
		display: inline-block;
		margin-right: 20px;
		margin-top: 20rpx;
	}

	.snacks {
		height: 18px;
		width: 36px;
		display: inline-block;
		margin-right: 20px;
	}

	.fruits {
		height: 18px;
		width: 36px;
		display: inline-block;
		margin-right: 20px;
	}

	.dishes {
		height: 18px;
		width: 36px;
		display: inline-block;
		margin-right: 20px;
	}

	.tesecanwu {
		display: flex;
		margin-top: 70rpx;
		color: #42594c;
		text-align: center;
		font-weight: 560;
		/* margin-top: 45px; */
		/* margin-bottom: 30px; */
		background-color: #e4ebe9;
		position: fixed;
		width: 100vw;
		height: 110px;
		top: 0;
		z-index: 99;
		top: -50px;
	}

	.navigationBar {
		color: #78837c;
		margin-top: 60rpx;
	}

	/* .headline {
		width: 120px;
		height: 30px;
		margin: 0 auto 0;
		text-align: center;
		font-size: 40rpx;
		
		margin-left: 125px;

	} */

	.subtitle {
		text-align: center;
		font-size: 32rpx;

	}
</style>